import React, { useState, useEffect } from 'react'
import { useNavigate, useSearchParams } from 'react-router-dom'
import styles from './list.module.css'

import http from '../../api/http'
import { InfiniteScroll } from 'antd-mobile'
function Index() {
  const [sp] = useSearchParams()
  const [hasMore, setHasMore] = useState(true)

  const start = sp.get('start')
  const end = sp.get('end')
  const nav = useNavigate()
  const [list, setList] = useState([])
  const [page, setPage]=useState(1)
  const Getlist = async () => {
    const res = await http.get('/api/trip/airplane', { params: { start, end,page } })
    console.log(res.data.data);
    setList([...res.data.data,...list])
    setPage(page+1)
  }
  const hanldeToDetail=(item)=>{
    nav('/detail',{state:item})

  }
  useEffect(() => {
    Getlist()
  }, [])
  return (
    <div>
      {
        list.length > 0 && list.map((item, ind) => {
          return <div key={ind} onClick={()=>hanldeToDetail(item)}> 
              <div >
                <div >
                  <div>
                    <p>{item.dst}</p>
                    <p>
                      {item.dasn} {item.dat}
                    </p>
                  </div>
                  <div style={{ margin: "0 10px" }}>→</div>
                  <div>
                    <p>{item.ast}</p>
                    <p>
                      {item.aasn} {item.aat}
                    </p>
                  </div>
                </div>
                <div >￥{item.lps[0].atp}</div>
              </div>
              <div>
                <span>{item.ss[0].asn}</span> | <span>{item.ss[0].amn}</span>
              </div>
          </div>
        })
      }
       <InfiniteScroll loadMore={Getlist} hasMore={hasMore} />
    </div>
  )
}

export default Index